<template>
    <div class="container container--body" style="margin-top:40px;" v-if="isShow">
        <div class="region region--primary">
            <div class="element element--list breadcrumbs">
                <ol class="list list--breadcrumbs">
                    <li class="breadcrumb__item">
                        <router-link class="link" itemprop="item">Home</router-link>
                    </li>
                    <li class="breadcrumb__item">
                        <router-link class="link" itemprop="item">Markets</router-link>
                    </li>
                    <li class="breadcrumb__item">
                        <router-link class="link" itemprop="item">Need to Know</router-link>
                    </li>
                </ol>
            </div>
            <div class="article__masthead crawler">
                <h2 class="article__column">
                    Need to Know
                </h2>
                <h1 class="article__headline">
                    {{ detailsform.title }}
                </h1>
                <time class="timestamp">
                    Published: {{ detailsform.createTime }}
                </time>
                <div class="byline">
                    <span>By</span>
                    <div class="author">
                        <router-link to=''>
                            <h4>{{ detailsform.author }}</h4>
                        </router-link>
                        <button type="button" class="follow">Follow</button>
                    </div>

                </div>
                <div class="zonedModule">
                    <a class="element element--comments comment-count j-comment-count has-loaded">
                        <span class="value spot-im-replies-count">
                            <span class="screen-reader-text">comments</span>
                        </span>
                    </a>
                </div>
                <h2 class="article__subhead" itemprop="alternativeHeadline">
                </h2>
            </div>
            <div class="column column--full">
                <!-- 中间大图 -->
                <div class="article__figure">
                    <div class="article__inset-wrapper--lead js-lead-image">
                        <div class="media-object">
                            <figure class="article__inset__image">
                                <div class="image-container">
                                    <img sizes="(max-width: 639px) 100vw, (max-width: 979px) 620px, (max-width: 1299px) 540px, 700px"
                                        :src="detailsform.imgUrl" v-if="detailsform.imgUrl">
                                    <img src="../../assets/detail-noImg.png" v-else>
                                </div>
                                <div class="dflex">
                                    <h4 class="caption-content">{{ detailsform.summary }}</h4>
                                    <span class="caption__credit" itemprop="creator">
                                        {{ detailsform.company }}
                                    </span>
                                </div>
                            </figure>
                        </div>
                    </div>
                </div>
                <!-- 中间大图 -->
                <div class="article__support">
                    <div class="group group--top">
                        <!-- 几个图片分享 -->
                        <Share></Share>
                        <!-- 数据展示 -->
                        <!-- <referSybol :symbolData="symbolData"></referSybol> -->
                        <!-- 提示去special offer -->
                        <speOffer :content="detailsform.content"></speOffer>
                    </div>
                </div>
            </div>
            <!-- readNext部分 -->
            <readNext :detailsform="detailsform" ref="childRef"></readNext>
            <!-- <coverComment></coverComment> 一期不要-->

            <router-link :to="{ name: 'authordetails', params: { id: detailsform.authorInfo.id, } }">
                <aboutAuthor :authorData="detailsform.authorInfo"></aboutAuthor>
            </router-link>
        </div>
        <div class="region region--aside">
            <div class="column column--full">
                <div class="element partner-center">
                    <header class="header">
                        <h4 class="title">
                            <span class="center-label">Partner Center</span>
                        </h4>
                    </header>
                </div>
                <div class="most_popular">
                    <h4 class="center-label">Most Popular</h4>
                    <div class="element element--article" v-for="item in popularDetail" :key="item.uuid">
                        <router-link :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }"
                            class="dflex">
                            <figure class="article__figure">
                                <div class="figure__image">
                                    <img :srcset="item.imgUrl" :src="item.imgUrl" alt="">
                                </div>
                            </figure>
                            <div class="article__content">
                                <h3 class="article__headline">{{ item.title }}</h3>
                            </div>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import Share from './share/share.vue';
// import referSybol from './referSybol/referSybol.vue';
import speOffer from './speOffer/speOffer.vue';
import readNext from './readNext/readNext.vue';
import aboutAuthor from './aboutAuthor/aboutAuthor.vue';
// import coverComment from './converComment/coverComment.vue';
// import { useDataArrays } from '../../api/data';
// const { symbolData } = useDataArrays()
import { useRoute } from 'vue-router'
const route = useRoute()
import homeRequest from "@/api/home.js";
const detailsform = ref({})
const isShow = ref(false)
const popularDetail = ref([])
// const authorData = ref({})
const childRef = ref(null)
onMounted(async () => {
    const data = await getDetail(route.params.uuid);
    detailsform.value = data
    isShow.value = true
    let value = window.sessionStorage.getItem('popularData')
    popularDetail.value = JSON.parse(value)
})
watch(
    () => route.params.uuid, // 或者 route.query 根据你需要监听的参数类型
    async (newParams, oldParams) => {
        const data = await getDetail(newParams);
        detailsform.value = data
        isShow.value = true
        childRef.value.getNext()
    },
    {
        deep: true, // 深度监听对象内部属性的变化
    }
);
const getDetail = async (uuid) => {
    try {
        const response = await homeRequest.detailData({ uuid });
        if (response.code === 0) {
            return response.data;
        } else {
            throw new Error('Failed to get detail data');
        }
    } catch (error) {
        return null;
    }
};
</script>
<style scoped lang='scss'>
.article__column {
    color: #767676;
    font-size: 1.285714286rem;
    margin-bottom: 5px;
}

.article__headline {
    font: 800 3.5rem / 1.125 Muli, sans-serif;
    color: #202020;
    margin-bottom: 10px;
}

.timestamp {
    display: block;
    color: #6a6a6a;
}

.byline {
    display: flex;
    position: relative;
    font-size: 1.142857143rem;
    position: relative;
    margin-bottom: 10px;
    padding-top: 20px;
    color: #6a6a6a;
}

.byline:before {
    content: "";
    height: 1px;
    width: 15px;
    background-color: #767676;
    position: absolute;
    left: 0;
    top: 10px;
    color: #6a6a6a;
}

.author {
    display: flex;

    h4 {
        text-decoration: underline;
        margin-left: 4px;
        font-weight: 400;
    }
}

.follow {
    color: rgb(33, 33, 33);
    background-color: white;
    border: 1px solid currentcolor;
    border-radius: 14px;
    font-size: 14px;
    margin-left: 8px;
    line-height: 16px;
    padding: 2px 4px;
}

.dflex {
    padding: 5px 0;
    justify-content: flex-start;
}

.caption-content {
    color: #666;
    font-size: 14px;
    font-weight: normal;
}

.caption__credit {
    color: #6a6a6a;
    font-weight: 700;
}

.article__support {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
}

.partner-center {
    margin-top: 34px;
    padding-bottom: 0;
    margin-bottom: 0;
}

.center-label {
    font-size: 18px;
    color: #202020;
    font-weight: bold;
    display: inline-block;
    margin-top: 10px;
}

h4.center-label {
    margin-bottom: 10px;
}

.most_popular .element--article:first-of-type {
    border-top: 1px solid #e1e1e1;
}

.most_popular .element--article {
    border-bottom: 1px solid #e1e1e1;
    flex-flow: row nowrap;
    margin: 0;
    padding: 10px 0;
    display: flex;

    .article__figure {
        flex: 0 0 120px;
        width: 120px;
        margin-right: 10px;

        .figure__image {
            position: relative;
            display: flex;
            justify-content: center;
            overflow: hidden;
            padding-bottom: 56.25%;
            background: #2e2e2e;
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
    }

    .article__headline {
        font-weight: normal;
        font-size: 14px;
        background: none;
        padding: 0;
        width: 100%;
        color: #202020;
        font-weight: 700;
    }

    .article__headline:hover {
        color: #3677a8;
    }
}
</style>